<!DOCTYPE html>
<html>
  <head>
    <title>Tooltip Examples</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

    <script src="build/vega-tooltip.js"></script>

    <link rel="stylesheet" type="text/css" href="examples.css" />
  </head>

  <body>
    <h1>Vega-Lite Tooltip Examples</h1>
    <a href="index.html" class="large">Back to overview</a>
    <div>
      <div id="vis-histogram" class="tooltip-example"></div>
      <div id="vis-scatter" class="tooltip-example"></div>
      <div id="vis-bubble-multi-aggr" class="tooltip-example"></div>
      <div id="vis-trellis-barley" class="tooltip-example"></div>
      <div id="vis-scatter-binned" class="tooltip-example"></div>
      <div id="vis-bar" class="tooltip-example"></div>
      <div id="vis-stacked-bar" class="tooltip-example"></div>
      <div id="vis-layered-bar" class="tooltip-example"></div>
      <div id="vis-color-line" class="tooltip-example"></div>
      <div id="vis-overlay-line" class="tooltip-example"></div>
      <div id="vis-overlay-area" class="tooltip-example"></div>
    </div>

    <a href="index.html" class="large">Back to overview</a>
    <a id="github-link" href="https://github.com/vega/vega-tooltip/">Back to Github</a>

    <script type="text/javascript">
      async function addVlExample(path, id, options) {
        const vlSpec = await d3.json(path);
        const handler = new vegaTooltip.Handler(options);
        await vegaEmbed(id, vlSpec, {
          tooltip: handler.call,
          mode: "vega-lite",
          config: {
            mark: {
              tooltip: true,
            },
          },
        });
      }

      addVlExample("specs/histogram.json", "#vis-histogram");
      addVlExample("specs/scatter.json", "#vis-scatter");
      addVlExample("specs/bubble_multiple_aggregation.json", "#vis-bubble-multi-aggr");
      addVlExample("specs/trellis_barley.json", "#vis-trellis-barley");
      addVlExample("specs/scatter_binned.json", "#vis-scatter-binned");
      addVlExample("specs/bar.json", "#vis-bar");
      addVlExample("specs/stacked_bar_weather.json", "#vis-stacked-bar");
      addVlExample("specs/bar_layered_transparent.json", "#vis-layered-bar");
      addVlExample("specs/line_color.json", "#vis-color-line");
      addVlExample("specs/overlay_area_short.json", "#vis-overlay-area");
    </script>
  </body>
</html>
